import React, { ChangeEvent, useState, MouseEvent } from 'react';
import './index.module.less';
import request from '@/services/request';
import { history } from 'umi';
import { message, Button } from 'antd';
import { setLocalStorageInfo } from '@/utils/localStorageInfo';
import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

export default function Login() {
  const [loginState, setLoginState] = useState({
    username: '',
    password: '',
  });

  const [registerState, setRegisterState] = useState({
    name: '',
    username: '',
    password: '',
  });

  const [loadings, setLoadings] = useState(false);

  function loginInputChange(event: ChangeEvent<HTMLInputElement>) {
    const value = event.target.value;
    const name = event.target.name;
    setLoginState({
      ...loginState,
      [name]: value,
    });
  }
  function login(event: MouseEvent) {
    setLoadings(true);
    setTimeout(() => {
      setLoadings(false);
    }, 3000);
    event.preventDefault();
    // 如果用户名和密码为空，则提示
    if (!loginState.username) return message.info('请输入用户名');
    if (!loginState.password) return message.info('请输入密码');
    console.log(loginState);
    request
      .post('/userInfo', {
        data: loginState,
      })
      .then((res) => {
        console.log(res);
        setLocalStorageInfo('userInfo', res);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        message.success('登录成功！');
        setTimeout(() => {
          history.replace('/');
        }, 500);
      });
  }

  function registerInputChange(event: ChangeEvent<HTMLInputElement>) {
    const value = event.target.value;
    const name = event.target.name;
    setRegisterState({
      ...registerState,
      [name]: value,
    });
  }

  function register(event: MouseEvent) {
    event.preventDefault();
    if (!registerState.name) return message.info('请输入姓名');
    if (!registerState.username) return message.info('请输入用户名');
    if (!registerState.password) return message.info('请输入密码');
    console.log(registerState);
    request
      .put('/api/register', {
        data: registerState,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        message.success('注册成功，请重新登录');
        document
          .getElementById('container')
          ?.classList.remove('right-panel-active');
      });
  }

  return (
    <div className="login">
      <div className="container" id="container">
        <div className="form-container sign-up-container">
          <form>
            <h1>注册</h1>
            <div className="social-container">
              <a href="/#" className="social">
                <IconFont type="icon-tuichu" />
              </a>
              <a href="/#" className="social">
                <IconFont type="icon-facebook" />
              </a>
              <a href="/#" className="social">
                <IconFont type="icon-twitter" />
              </a>
            </div>
            <span>第三方账号注册</span>
            <input
              type="text"
              name="name"
              placeholder="姓名"
              onChange={registerInputChange}
            />
            <input
              type="text"
              name="username"
              placeholder="用户名"
              onChange={registerInputChange}
            />
            <input
              type="password"
              name="password"
              placeholder="密码"
              onChange={registerInputChange}
            />
            <button onClick={register}>注册</button>
          </form>
        </div>
        <div className="form-container sign-in-container">
          <form onSubmit={() => false}>
            <h1>登录</h1>
            <div className="social-container">
              <a href="#" className="social">
                <IconFont type="icon-facebook" />
              </a>
              <a href="#" className="social">
                <IconFont type="icon-twitter" />
              </a>
              <a href="#" className="social">
                <IconFont type="icon-tuichu" />
              </a>
            </div>
            <span>第三方账号登录</span>
            <input
              type="text"
              name="username"
              placeholder="用户名"
              onChange={loginInputChange}
            />
            <input
              type="password"
              name="password"
              placeholder="密码"
              onChange={loginInputChange}
            />
            <a href="#">忘记密码？</a>
            <Button type="primary" loading={loadings} onClick={login}>
              登录
            </Button>
          </form>
        </div>
        <div className="overlay-container">
          <div className="overlay">
            <div className="overlay-panel overlay-left">
              <h1>Bsin-PaaS</h1>
              <p>企业级低代码开发平台</p>
              <button
                className="ghost"
                id="signIn"
                onClick={() => {
                  document
                    .getElementById('container')
                    ?.classList.remove('right-panel-active');
                }}
              >
                登录
              </button>
            </div>
            <div className="overlay-panel overlay-right">
              <h1>Bsin-PaaS</h1>
              <p>企业级低代码开发平台</p>
              <button
                className="ghost"
                id="signUp"
                onClick={() => {
                  document
                    .getElementById('container')
                    ?.classList.add('right-panel-active');
                }}
              >
                注册
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
